import React from 'react';
import classnames from 'classnames';
import weatherEnum from '@/constant/weather';
import styles from './index.less';

const { status } = weatherEnum;

interface Props {
  type: `${ENUM.Weather}`; // 获取枚举的所有值
  style?: any;
}

const Index: React.FC<Props> = (props) => {
  const { type, style } = props;

  const integrationHandler = () => {
    const keys = Object.keys(status.original || {});
    keys.map((v) => {
      const item = status[v];
      if (v === status.faiWeather.key) {
        item.render = (
          <div className={classnames(styles.box, styles.sunShower)}>
            <div className={styles.cloud} />
            <div className={styles.sun}>
              <div className={styles.rays} />
            </div>
          </div>
        );
      }
      if (v === status.cloudy.key) {
        item.render = (
          <div className={classnames(styles.box, styles.sunny)}>
            <div className={styles.sun}>
              <div className={styles.rays} />
            </div>
          </div>
        );
      }
      if (v === status.rainy.key) {
        item.render = (
          <div className={classnames(styles.box, styles.rainy)}>
            <div className={styles.cloud} />
            <div className={styles.rain} />
          </div>
        );
      }
      if (v === status.snow.key) {
        item.render = (
          <div className={classnames(styles.box, styles.flurries)}>
            <div className={styles.cloud} />
            <div className={styles.snow}>
              <div className={styles.flake} />
              <div className={styles.flake} />
            </div>
          </div>
        );
      }
      if (v === status.thunder.key) {
        item.render = (
          <div className={classnames(styles.box, styles.thunderStorm)}>
            <div className={styles.cloud} />
            <div className={styles.lightning}>
              <div className={styles.bolt} />
              <div className={styles.bolt} />
            </div>
          </div>
        );
      }
      if (v === status.overcastSky.key) {
        item.render = (
          <div className={classnames(styles.box, styles.cloudy)}>
            <div className={styles.cloud} />
            <div className={styles.cloud} />
          </div>
        );
      }
      return item;
    });
    return status;
  };

  return (
    <div className={styles.container} style={style}>
      {integrationHandler()[type]?.render}
      {/* <div className={classnames(styles.box, styles.sunShower)}>
        <div className={styles.cloud} />
        <div className={styles.sun}>
          <div className={styles.rays} />
        </div>
      </div>
      <div className={classnames(styles.box, styles.sunny)}>
        <div className={styles.sun}>
          <div className={styles.rays} />
        </div>
      </div>
      <div className={classnames(styles.box, styles.cloudy)}>
        <div className={styles.cloud} />
        <div className={styles.cloud} />
      </div>

      <div className={classnames(styles.box, styles.rainy)}>
        <div className={styles.cloud} />
        <div className={styles.rain} />
      </div>

      <div className={classnames(styles.box, styles.thunderStorm)}>
        <div className={styles.cloud} />
        <div className={styles.lightning}>
          <div className={styles.bolt} />
          <div className={styles.bolt} />
        </div>
      </div>

      <div className={classnames(styles.box, styles.flurries)}>
        <div className={styles.cloud} />
        <div className={styles.snow}>
          <div className={styles.flake} />
          <div className={styles.flake} />
        </div>
      </div> */}
    </div>
  );
};

export default Index;
